<template>
	<div class="body" :class="{active: active}">
		<!-- 地址 -->
		<!-- <div class="header">
			<div>
				<img @click="returnGo" src="../../assets/homeimg/滑动左.png" />
				<span>我的地址</span>
			</div>
		</div> -->
		<Header :type="type"></Header>
		<div class="main">
			<!-- <van-pull-refresh  v-model="isLoading" success-text="刷新成功" @refresh="onRefresh"> -->
		<ul class="list">
				<!-- <p style="height: 90px;">刷新次数: {{ count }}</p> -->
			<li class="item" v-for="(item,index) in list" :key="index" @click="selectAddress(item)">
				<div class="item-c">
					<div class="top">
						<span class="top-a">{{item.contactor_name}}</span>
						<span class="top-b">{{item.phone}}</span>
					</div>
					<span class="min">{{item.address}}{{item.street}}</span>
					<span class="line"></span>
						<div class="bottom">
							<div class="moren">
								<input type="radio" class="test-radio" :checked="item.is_default==1" @click.stop="change(item.id)" />
								<span>默认地址</span>
							</div>
						    
							<!-- <van-radio-group v-model="radio">
              <van-radio :name="item.is_default" @click="change(token,item.id)">默认地址</van-radio>
            </van-radio-group> -->
							<!-- <van-checkbox v-model="checked" @click="change(token,item.id)">默认地址</van-checkbox> -->
							<!--s <van-checkbox v-model="isChecked" @click="change(token,item.id)">默认地址</van-checkbox> -->
							<div class="button">
								<span class="edit" @click.stop="edit(item.id)">编辑</span>
								<span class="del" @click.stop="del(token,item.id)">删除</span>
							</div>
						</div>
				</div>
			</li>
			
		</ul>
		
		<!-- </van-pull-refresh> -->
		<div class="add" @click="add">
			<div>添加地址</div>
		</div>
		</div>
		
	</div>
</template>

<script>
import Header from "@/components/header"
	import addressApi from "@/api/address";
	import { PullRefresh } from 'vant';

	export default {
		data() {
			return {
				checked: true,
				radio: 1,
				list: [],
				token: "",
				isLoading: false,
				type: 0,//个人中心进还是订单进，0是订单
				active: false
				// count:0
			};
		},
		components: {
			Header
		},
		created() {
			if(this.$store.state.ios){
				this.active = true;
			}
			// if (localStorage.getItem("user")) {
			// 	var info = JSON.parse(localStorage.getItem("user"));
			// };
			// this.token = info.token;
			// this.token = this.$store.state.token;
			this.type = this.$route.query.type;
			if(this.$route.query.token){
				// this.token = this.$route.query.token;
				this.$store.commit('SAVE_TOKEN',this.$route.query.token)
			}
			this.getAddressList();
		},
		methods: {
			selectAddress(item){
				if(this.type == 1){
					this.$store.commit('SAVE_ADDRESS',item);
					this.$router.go(-1);
				}
			},
			onRefresh() {
				setTimeout(() => {
					// Toast('刷新成功');
					this.isLoading = false;
					// this.count++;
				}, 1000);
			},
			returnGo() {
				if(this.type == 1){
					this.$router.go(-1);
					return
				}
				window.h5_android && window.h5_android.reback();
				window.webkit.messageHandlers.pageBack_js_oc.postMessage([])
			},
			add() {
				this.$router.push("/addAddress");
			},
			// 地址列表
			getAddressList() {
				this.$http.post('/addons/xshop/user/getAddress').then(res => {
					this.list = res.data;
					if(this.list.length > 0){
						this.list.forEach(el=>{
							el.address.replace(/,/,'');
							// console.log(el.address)
						})
					}
				})
				// addressApi.addressList({
				// 	token
				// }).then(res => {
				// 	// console.log(res);
				// 	this.list = res.data;
				// 	if(this.list.length > 0){
				// 		this.list.forEach(el=>{
				// 			el.address.replace(/,/,'');
				// 			console.log(el.address)
				// 		})
				// 	}
                      
				// });
			},

			// 编辑
			edit(id) {
				this.$router.push({
					name: "addAddress",
					params: {
						id
					}
				});
			},
			// 删除
			del(token, id) {
				this.$http.post('/addons/xshop/user/delAddress',{address_id: id}).then(res => {
					if (res.code == 1) {
							this.$toast.success("删除成功!");
						}
						this.getAddressList(token);
				})
				// addressApi
				// 	.delAddress({
				// 		token: this.token,
				// 		address_id: id
				// 	})
				// 	.then(res => {
				// 		if (res.code == 1) {
				// 			this.$toast.success("删除成功!");
				// 		}
				// 		this.getAddressList(token);
				// 	});
			},
			//设置默认
			change(id) {
				// console.log(id)
				this.$http.post('/addons/xshop/user/moRen',{address_id:id}).then(res => {
					this.$toast.success("设置成功!");
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.body {
		color: #333333;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background: rgba(247, 247, 247, 1);
		background-size: 100% 100%;
		padding-bottom: 50px;
		position: relative;
		padding-top: calc(11.7333vw + 0px);
        box-sizing: border-box;
        &.active{
            padding-top: calc(11.7333vw + 30px);
        }
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		width: 100%;
		text-align: center;
		height: 2.75rem;
		line-height: 2.75rem;
		padding-top: 1.25rem;
		background: rgba(255, 255, 255, 1);
		color: #333333;
		font-size: 1.25rem;
        z-index: 99;
		img {
			width: 0.625rem;
			height: 1.125rem;
			position: absolute;
			left: 1rem;
			bottom: 0.75rem;
		}
	}
	// 在scss文件中
	@supports(bottom:constant(safe-area-inset-top)) {
	
		// 如果存在底部安全区域
		.header {
			padding-top: constant(safe-area-inset-top);
	
		}
	
	}
	
	@supports(bottom:env(safe-area-inset-top)) {
	
		// 如果存在底部安全区域
		.header {
			padding-top: env(safe-area-inset-top);
	
		}
	
	}
    .main{
		width: 100%;
		height: 100%;
		// margin-top:  3.125rem;
		position: relative;
		/deep/.van-pull-refresh{
			min-height: calc(100% - 2.75rem);
		}
	}
	.list {
		width: 92vw;
		list-style: none;
		margin: 0 auto;
		
        // padding-top: 10px;
		// padding-bottom: 2.75rem;
		// overflow: hidden;
		.item {
			width: 100%;
			height: 8.3125rem;
			background: rgba(255, 255, 255, 1);
			border-radius: 0.3125rem;
			margin-top: 0.625rem;
			padding: 2vw;
			box-sizing: border-box;

			.item-c {
				// width: 19.875rem;
				height: 100%;
				margin: 0 auto;

				.top {
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding-top: 0.9375rem;

					span {
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
					}

					.top-a {
						font-size: 1rem;
					}

					.top-b {
						font-size: 0.875rem;
					}
				}

				.min {
					display: block;
					padding-top: 0.625rem;
					font-size: 0.75rem;
					font-weight: 500;
					color: rgba(102, 102, 102, 1);
					line-height: 0.9375rem;
				}

				.line {
					display: block;
					// width: 19.875rem;
					height: 0.0625rem;
					background: #979797;
					margin-top: 0.625rem;
				}

				.bottom {
					display: flex;
					justify-content: space-between;
					padding-top: 0.625rem;
					font-size: 12px;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
                    .moren{
						display: flex;
						.test-radio{
							    width: 0.9375rem;
							    height: 0.9375rem;
							    appearance: none;
							    position: relative;
								border: none;
								background: none;
						}
						.test-radio::before{
							 content: '';
							    width: 0.9375rem;
							    height: 0.9375rem;
							    border: 0.0625rem solid #333;
							    display: inline-block;
							    border-radius: 50%;
							    vertical-align: middle;
							
						}
						.test-radio:checked:before{
						    content: '';
						    width: 0.9375rem;
						    height: 0.9375rem;
						    border: 0.0625rem solid rgba(255, 207, 62, 1);
						    background:rgba(255, 207, 62, 1);
						    display: inline-block;
						    border-radius: 50%;
						    vertical-align: middle;
						}
						.test-radio:checked:after{
						    content: '';
						    width: 0.375rem;
						    height:0.1875rem;
						    border: 0.125rem solid white;
						    border-top: transparent;
						    border-right: transparent;
						    text-align: center;
						    display: block;
						    position: absolute;
						    top: 0.37rem;
						    left:0.3125rem;
						    // vertical-align: middle;
						    transform: rotate(-45deg);
						}
						span{
							line-height: 1.5625rem;
							margin-left: 0.3125rem;
						}
					}
					.edit {
						margin-right: 1.25rem;
					}
				}
			}
		}
	}

	.add {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		div{
			width: 18.4375rem;
			height: 2.75rem;
			margin-top: 1.25rem;
			margin: 0 auto;
			background: linear-gradient(90deg,
				rgba(255, 207, 62, 1) 0%,
				rgba(255, 177, 10, 1) 100%);
			border-radius: 2.75rem;
			text-align: center;
			line-height: 2.75rem;
			font-size: 1.125rem;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
		}
		
		
	}
</style>
